import AppBar from "@/components/layouts/AppBar";
import Layout from "@/components/layouts/Layout";
import LineDivider from "@/components/elements/LineDivider";
import WithAuth from "@/components/auth/WithAuth";
import { useEffect, useState } from "react";
import apiOdoo from "@/core/utils/apiOdoo";
import { useRouter } from "next/router";
import { useAuth } from "@/core/utils/auth";
import VariantCard from "@/components/variants/VariantCard";
import currencyFormat from "@/core/utils/currencyFormat";
import Disclosure from "@/components/elements/Disclosure";
import DescriptionRow from "@/components/elements/DescriptionRow";
import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
import { SkeletonList } from "@/components/elements/Skeleton";
import Link from "@/components/elements/Link";
import { ChevronRightIcon } from "@heroicons/react/24/outline";
import Alert from "@/components/elements/Alert";
import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge";

export default function DetailTransaction() {
  const router = useRouter();
  const { id } = router.query;
  const [ auth ] = useAuth();
  const [ transaction, setTransaction ] = useState(null);

  useEffect(() => {
    if (auth && id) {
      const loadTransaction = async () => {
        const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`);
        setTransaction(dataTransaction);
      }
      loadTransaction();
    }
  }, [ auth, id ]);

  return (
    <WithAuth>
      <Layout className="pb-4">
        <AppBar title="Detail Transaksi" />
        
        { transaction ? (
          <>
            <div className="p-4 flex flex-col gap-y-4">
              <DescriptionRow label="Status Transaksi">
                <div className="flex justify-end">
                  <TransactionStatusBadge status={transaction?.status} />
                </div>
              </DescriptionRow>
              <DescriptionRow label="No Transaksi">
                { transaction?.name }
              </DescriptionRow>
              <DescriptionRow label="Purchase Order">
                { transaction?.purchase_order_name || '-' }
              </DescriptionRow>
              <DescriptionRow label="Ketentuan Pembayaran">
                { transaction?.payment_term }
              </DescriptionRow>
              <DescriptionRow label="Nama Sales">
                { transaction?.sales }
              </DescriptionRow>
              <DescriptionRow label="Waktu Transaksi">
                { transaction?.date_order }
              </DescriptionRow>
            </div>

            <LineDivider />

            <p className="h2 p-4">Detail Produk</p>

            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
              { transaction?.products?.map((product, index) => (
                <VariantCard
                  key={index}
                  data={product}
                  buyMore
                />
              )) }
              <div className="flex justify-between mt-3 font-medium">
                <p>Total Belanja</p>
                <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
              </div>
            </div>

            <LineDivider />

            <TransactionDetailAddress transaction={transaction} />

            <LineDivider />

            <div className="p-4">
              <p className="h2">Invoice</p>
              <div className="flex flex-col gap-y-3 mt-4">
                { transaction?.invoices?.map((invoice, index) => (
                  <Link href={`/my/invoice/${invoice.id}`} key={index}>
                    <div className="shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between">
                      <div>
                        <p className="mb-2">{ invoice?.name }</p>
                        <div className="flex items-center gap-x-1">
                          { invoice.amount_residual > 0 ? (
                            <div className="badge-red">Belum Lunas</div>
                            ) : (
                            <div className="badge-green">Lunas</div>
                          ) }
                          <p className="text-caption-2 text-gray_r-11">
                            { currencyFormat(invoice.amount_total) }
                          </p>
                        </div>
                      </div>
                      <ChevronRightIcon className="w-5 stroke-2" />
                    </div>
                  </Link>
                )) }
                { transaction?.invoices?.length === 0 && (
                  <Alert type='info' className='text-center'>
                    Belum ada Invoice
                  </Alert>
                ) }
              </div>
            </div>
          </>
        ) : (
          <div className="p-4 py-6">
            <SkeletonList number={12} />
          </div>
        ) }
      </Layout>
    </WithAuth>
  );
}